<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>IT书城</title>
    <link rel="icon" type="image/x-icon" href="/static/images/logoIcon.icon">
    <link rel="stylesheet" type="text/css" href="/static/css/book.css">
    <link rel="stylesheet" href="/static/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="/static/css/font-awesome.min.css"/>
</head>
<body th:style="'background-color : ' + ${session.config.color1}">
<!--顶部导航部分-->
<div class="nav">
    <!--导航居中样式-->
    <div class="navCenter">
        <div class="navLeft">
            <!--logo-->
            <div class="logo">
                <a href="/user/index"><img src="/static/images/logo.png"/></a>
            </div>
            <!--主页-->
            <div class="mainPage"><a href="/user/index" style="color: black">首页</a></div>

            <!--左侧未登录导航-->
            <!--下载App-->
            <div class="download" th:if="${session.user==null}"><a href="">下载App</a></div>
            <!--下载App隐藏部分-->
            <div class="downloadHide">
                <img src="/static/images/QRCode.jpg">
            </div>
            <!--左侧登录后导航将下载App换为关注和消息部分-->
            <!--关注-->
            <div class="attention" th:if="${session.user!=null}"><a href="/focus/focusInformation">关注</a></div>
            <!--消息-->
            <div class="information" th:if="${session.user!=null}"><a href="/message/getCommentMessage" style="color: black">消息</a></div>
            <div th:if="${session.user!=null}" style="display: inline-block"><div class="informationIcon" th:text="${session.message}"></div></div>

            <!--搜索部分-->

            <div class="search">
                <form action="/serialize/selectBS" method="get">
                    <input type="text" name="name" class="navInput"/>
                    <button class="navBtn" type="submit"><i class="fa fa-search"></i></button>
                </form>
            </div>
        </div>

        <!--<a href="/user/sign">登录</a>-->
        <!--右侧导航-->
        <div class="navRight">
            <!--右侧未登录导航有登录注册部分-->
            <div class="signIn" th:if="${session.user==null}">
                <a href="/user/sign">登录</a>
            </div>

            <!--<ul>-->
            <!--<li><a th:if="${session.user==null}" href="/user/sign">登录</a></li>-->
            <!--<li><a th:if="${session.user!=null}" href="/user/loginOut">退出</a></li>-->
            <!--</ul>-->
            <div class="register" th:if="${session.user==null}"><a href="/user/registerPage">注册</a></div>
            <!--右侧已登录导航有个人信息图片部分-->
            <!--个人信息图片部分-->

            <div th:if="${session.user!=null}" class="myselfPic"><img th:src="${session.user.uHead}">
                <i class="fa fa-sort-down" id="myselfDown"></i>
                <i class="fa fa-sort-up" id="myselfUp"></i>
            </div>
            <!--登录后显示个人信息图片下拉菜单-->
            <ul class="myselfDownList" style="padding-left: 0;margin-top: 0">
                <a href="/user/PersonalPage">
                    <li><i class="fa fa-user"></i> 个人中心</li>
                </a>
                <a href="/user/personalData">
                    <li><i class="fa fa-drivers-license-o"></i> 我的资料</li>
                </a>
                <a href="/focus/focusInformation">
                    <li><i class="fa fa-check-square-o"></i> 我的收藏</li>
                </a>
                <a href="/message/getCommentMessage">
                    <li><i class="fa fa-group"></i> 我的消息</li>
                </a>
                <li class="loginOut" style="cursor: pointer"><i class="fa fa-reply-all"></i> 退出</li>
            </ul>
            <!--写文章按钮-->
            <a href="/test/editor">
                <div class="write">写文章</div>
            </a>

        </div>
    </div>
</div>

<!--主体部分-->
<div class="mainPageBody">
    <div class="book-view">
        <div class="head-book">
            <span class="classes"><a href="/user/serialize">付费</a></span>
            <span class="classes"><a href="/serialize/recommendList">免费</a></span>
        </div>
        <div class="content-book">
            <div class="lists" th:each="books : ${book}">
                <a class="content-list" th:href="@{/user/readBook?(serializeId=${books.serialize.sId})}">
                    <div class="example-book">
                        <img th:src="${books.serialize.sAddress}">
                    </div>
                    <div class="example-text">
                        <div class="title" th:text="${books.serialize.sTitle}"></div>
                        <div class="pragraph" th:text="${books.serialize.sIntroduction}">
                        </div>
                        <div class="author">
                            <div class="aut-information">
                                <!--连接到作者简介  -->
                                <object><a href="author.html" class="link">
                                    <!--style="background-image: url(/static/images/bj-5.jpg);"-->
                                    <div class="aut-photo">
                                        <img th:src="${books.user.uHead}">
                                    </div>
                                    <div class="aut-name" th:text="${books.user.uName}">作者名字</div>
                                </a></object>
                            </div>
                        </div>
                        <div class="price">
                            <div class="buy-price" style="margin: 0;">￥</div>
                            <div class="buy-price" th:text="${books.serialize.sPrice}"></div>
                            <div class="message">..章</div>
                            <div class="message">..人已购买</div>
                        </div>
                    </div>
                </a>
            </div>
            <div class="aside">
                <div class="fixed-section">
                    <div class="section">
                        <div class="guide">
                            <div class="title-guide">书城的使用指南</div>
                            <div class="pragraph-guide">书城中的书，开通会员即可享受优惠打折；也可使用金币购买书籍。</div>
                        </div>
                        <div class="qrc-scan">
                            <div class="qrc-guide">扫码二维码，快捷下载app</div>
                            <div class="qrc-photo">
                                <img src="/static/images/QRCode.jpg">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
<script type="text/javascript" src="/static/js/jquery-3.4.0.js"></script>
<script type="text/javascript" src="/static/js/informationComment.js"></script>
</html>